<template>
  <div>
    <div class="returnhead">
      <router-link :to="`/orderlist`"><el-page-header :icon="ArrowLeft" style="width:180px" content="订单详情"/></router-link>
    </div>&nbsp;
    <el-card class="box-card">
    <el-row>
        <el-col :span="6"><div class="grid-content bg-purple">
          <span>订单编号：</span><span>{{order.orderId}}</span>
          </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light">
           <span>运单编号：</span><span>{{order.transportOrder.id}}</span>
          </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
           <span>下单时间：</span><span>{{order.createTime}}</span></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light">
           <span>订单状态：</span>{{order.status}}<span></span>
          </div></el-col>
    </el-row>
    <br><br>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple">
        <span>预计到达日期：</span><span></span>
        </div></el-col>
    </el-row>
    </el-card>
    <el-card class="card-z">
      <div class="demo-collapse">
        <el-collapse v-model="activeName" @change="handleChange">
          <el-collapse-item title="基本信息" name="1">
            <div class="block">
                <el-timeline>
                  <el-timeline-item timestamp="发货方" placement="top">
                    <div class="timecrad">
                      <el-row>
                        <el-col :span="12"><div class="grid-content bg-purple">
                          <span style="font-size:12px">发货方姓名：</span>{{order.senderName}}<span></span>
                          </div></el-col>
                        <el-col :span="12" style="font-size:12px"><div class="grid-content bg-purple-light">
                          <span>发货方地址：</span><span></span>
                          </div></el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12"><div class="grid-content bg-purple">
                          <span style="font-size:12px">发货方电话：</span>{{order.senderPhone}}<span></span>
                          </div></el-col>
                        <el-col :span="12" style="font-size:12px"><div class="grid-content bg-purple-light">
                          <span>详细地址：</span>{{order.senderAddress}}<span></span>
                          </div></el-col>
                    </el-row>
                    </div>
                  </el-timeline-item>
                  <el-timeline-item timestamp="收货方" placement="top">
                    <div class="timecrad">
                      <el-row>
                        <el-col :span="12"><div class="grid-content bg-purple">
                          <span style="font-size:12px">收货方姓名：</span>{{order.receiverName}}<span></span>
                          </div></el-col>
                        <el-col :span="12" style="font-size:12px"><div class="grid-content bg-purple-light">
                          <span>收货方地址：</span><span></span>
                          </div></el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12"><div class="grid-content bg-purple">
                          <span style="font-size:12px">收货方电话：</span>{{order.receiverPhone}}<span></span>
                          </div></el-col>
                        <el-col :span="12" style="font-size:12px"><div class="grid-content bg-purple-light">
                          <span>详细地址：</span>{{order.receiverAddress}}<span></span>
                          </div></el-col>
                    </el-row>
                    </div>
                  </el-timeline-item>
                </el-timeline>
            </div>
            <el-row>
                    <el-col :span="4"><div class="grid-content bg-purple">
                      <span>&emsp;距离：</span>{{order.distance}}<span></span>km
                      </div></el-col>
                    <el-col :span="4" style="font-size:12px"><div class="grid-content bg-purple-light">
                     <el-link type="primary" style="font-size:12px" @click="show()">查看地图</el-link>
                      </div></el-col>
                    </el-row>
            
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-card>
    <el-card class="fyxx">
      <div class="demo-collapse">
        <el-collapse v-model="activeName1" @change="handleChange">
          <el-collapse-item title="费用信息" name="1">
              <el-row>
              <el-col :span="8"><div class="grid-content bg-purple">
                <span>运费：</span><span>{{order.amount}}元</span>
                </div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple-light">
                <span>支付方式：</span><span>{{order.paymentMethod}}</span>
                </div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple">
                <span>付款状态：</span><span>{{order.paymentStatus}}</span></div></el-col>
          </el-row>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-card>
    <el-card class="hwxx">
      <div class="demo-collapse">
        <el-collapse v-model="activeName1" @change="handleChange">
          <el-collapse-item title="货品信息" name="1">
              <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column type="index" fixed label="序号" width="50" />
                <el-table-column prop="name" label="货品名称" width="180" />
                <el-table-column prop="quantity" label="货品数量" />
                <el-table-column prop="goodsTypeId" label="货品类型" />
                <el-table-column prop="weight" label="重量（千克）" />
                <el-table-column prop="volume" label="体积（方）" />
                <el-table-column prop="cargoBarcode" label="条形编码" />
                <el-table-column prop="remark" label="备注" />
              </el-table>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-card>

    <el-card class="qjxx">
      <div class="demo-collapse">
        <el-collapse v-model="activeName2" @change="handleChange">
          <el-collapse-item title="取件信息" name="1">
              <el-row>
              <el-col :span="6"><div class="grid-content bg-purple">
                <span>所在网点：</span><span></span>
                </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple-light">
                <span>取件类型：</span><span></span>
                </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">
                <span>作业状态：</span><span></span></div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">
                <span>取件快递员：</span><span></span></div></el-col>
          </el-row>
          <br>
          <el-row>
              <el-col :span="6"><div class="grid-content bg-purple">
                <span>快递员电话：</span><span></span>
                </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple-light">
                <span>预计取件时间：</span><span></span>
                </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">
                <span>取件完成时间：</span><span></span></div></el-col>
          </el-row>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-card>



    <el-dialog
      title="地图查看"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose">
        
    </el-dialog>
      
      
  </div>
</template>

<script>
import orderInfoApi from "@/apis/orderInfo.js";
// import baiduMap from 'vue-baidu-map';

export default {
    data(){
        return{
            order:"",
            orderId:"",
            activeName:"1",
            activeName1:"1",
            activeName2:"1",
            tableData: [],
            dialogVisible: false,
            handleClose:"",
            mapStyle:{
          width:'100%',
          height:this.mapHeight +'px'
        },
        }
    },
    methods:{
        show(){
          this.dialogVisible=true
        },
        orderCargoInfo(orderId){
            orderInfoApi.orderCargoList({"orderId":orderId}).then((response)=>{
              this.tableData=response.data
              console.log(response.data)
            })

        },
        orderinfo(orderId){
             orderInfoApi.orderInfo(orderId).then((response)=>{
            this.order=response.data;
            this.order.createTime=this.order.createTime[0]+"-"+this.order.createTime[1]+"-"+this.order.createTime[2]+"  "+this.order.createTime[3]+":"+this.order.createTime[4]+":"+this.order.createTime[5] 
            console.log(this.order.createTime )
            if(this.order.paymentMethod==1){
                this.order.paymentMethod="预结"
            }
            if(this.order.paymentMethod==2){
                this.order.paymentMethod="到付"
            }
            if(this.order.status=="23002"){
              this.order.status="网点自寄"
            }
            if(this.order.paymentStatus==1){
              this.order.paymentStatus="未付"
            }
            if(this.order.paymentStatus==2){
              this.order.paymentStatus="已付"
            }
            
            console.log(response.data)
        // alert(response.data.senderName)
    })
        },
        
    },
    mounted: function () {
      //订单id
    const orderId =this.$route.params.orderId
    this.orderinfo(orderId)
    this.orderCargoInfo(orderId)



    
  },
}
</script>

<style>
.returnhead{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
}
.box-card{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 18px;
}
.card-z{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1%;
  padding: 0 18px;
}
.timecrad{
  width: 60%;
  padding: 0 0;
  padding: 2px 10px;
  opacity: 0.7;
}
.fyxx{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1%;
  padding: 0 18px;
}
.hwxx{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1%;
  padding: 0 18px;
}
.qjxx{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1%;
  padding: 0 18px;
}

</style>